<template>
  <div class="hore-edit">
    <h3>编辑英雄</h3>
    <hr />
    <form class="form-horizontal" @submit.prevent="editHore()">
      <div class="form-group">
        <label class="col-sm-2 control-label">英雄名称</label>
        <div class="col-sm-10">
          <input v-model="horeForm.horeName" type="text" class="form-control" style="width:200px" />
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">英雄性别</label>
        <div class="col-sm-10">
          <input v-model="horeForm.gender" type="radio" value="男" /> 男
          <input v-model="horeForm.gender" type="radio" value="女" /> 女
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-primary">编辑</button>
        </div>
      </div>
    </form>
  </div>
</template>
           
<script>
import axios from "axios";
export default {
  data() {
    return {
      horeForm: {
        horeName: "",
        gender: ""
      }
    };
  },
  created() {
    this.getHore();
  },
  methods: {
    getHore() {
      axios
        .get("http://localhost:3000/hore/" + this.$route.params.id)
        .then(res => {
          this.horeForm = res.data;
        });
    },
    editHore() {
      const { horeName, gender, id } = this.horeForm;
      axios
        .put("http://localhost:3000/hore/" + id, {
          horeName,
          gender,
          time: new Date()
        })
        .then(() => {
          this.$router.push("/hore");
        });
    }
  }
};
</script>
<style scoped>
</style>